<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link href="${pageContext.request.contextPath}/js/layui/css/layui.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="${pageContext.request.contextPath}/js/layui/layui.all.js"></script>
<script type="text/javascript">
var $ = layui.$;

$(function(){
	layui.config({
		  base: '${pageContext.request.contextPath}/js/layuiExtend' //配置 layui 第三方扩展组件存放的基础目录
		}).extend({
			asynTreeSelect: '/asynTreeSelect'
		}).use(['asynTreeSelect'], function(){
		
		 
	  var asynTreeSelect = layui.asynTreeSelect;
	  
	 var asynTreeSelectIns= asynTreeSelect.render({
	    elem: '#test'
	    ,getCurrentNodeUrl:"${pageContext.request.contextPath}/test/getRealmByParam1.action" //根据paramName获取当前节点的请求
	    ,getChildrenNodeUrl:"${pageContext.request.contextPath}/test/getRealmByParam1.action" //根据paramName获取子节点的请求
	    ,getBrotherNodeUrl:"${pageContext.request.contextPath}/test/getRealmByParam1.action" //根据paramName获取兄弟节点的请求
	    ,paramName:"currNodeId" //请求后台带的参数，此处为区域id
	    ,paramType:"postType" //请求后台自带的参数，获取本节点时候 postType=1，获取子节点时候 postType=2,获取兄弟节点的时候该值为3
	                          //所以后台可以根据此值判断是发出什么请求，getCurrentNodeUrl、getChildrenNodeUrl、getBrotherNodeUrl请求都是同一个就行
	    ,rootNodeValue:"44"
	    //,defaultValue:"440232"
	    ,separator:"/"
	    ,showRootNode:true //是否显示根节点，默认true
	    //,maxWidth:400
	    ,response:{
       	     idName:"REALM_ID"
            ,valueName:"REALM"
            ,parentName:"PARENT_ID"
        }
	   /*    ,onlick:function(data){
	    	console.log(data)
	    }  
		,onDivClose:function(idValues,nameValues){
			    	console.log(idValues)
			    	console.log(nameValues)
		 } */
	  });
	  
	  //三个请求返回数据的格式为 [{REALM_ID:"4401",REALM:"广州",PARENT_ID:"44"},{REALM_ID:"4402",REALM:"深圳",PARENT_ID:"44"}]
	});
	//asynTreeSelectIns.reload({defaultValue:"4402"});重新赋值
	//asynTreeSelectIns.getIdValues(); //获取当前选择的节点id，数组类型。[44,4401]
	//asynTreeSelectIns.getNameValues(); //获取当前选择的节点名称，数组类型。[广东,广州]
	var form = layui.form;  
	 form.render();	
})
</script>
</head>
<body>
<form action=""  class="layui-form">
<div class="layui-form-item">
    <label class="layui-form-label">单行选择框</label>
    <div class="layui-input-block">
      <select name="sss" lay-filter="aihddddao">
        <option value=""></option>
        <option value="0">写作</option>
        <option value="1" selected="">阅读</option>
        <option value="2">游戏</option>
        <option value="3">音乐</option>
        <option value="4">旅行</option>
      </select>
    </div>
  </div>
<div style="padding: 50px;width:400px;">
 <input id="test" value="440232"  /> <!-- value 为默认值 -->
  
 </div>
  <div class="layui-form-item">
    <label class="layui-form-label">单行选择框</label>
    <div class="layui-input-block">
      <select name="interest" lay-filter="aihao">
        <option value=""></option>
        <option value="0">写作</option>
        <option value="1" selected="">阅读</option>
        <option value="2">游戏</option>
        <option value="3">音乐</option>
        <option value="4">旅行</option>
      </select>
    </div>
  </div>
 </form>
</body>
</html>